<template>
  <div class="bigboxss">
    <div class="title">
      <span>
        <i @click="addechart" class="iconfont icon-zhuzhuangtutubiao"></i>
        <i @click="addtable" class="iconfont icon-biaoge"></i>
      </span>
    </div>
    <div class="bodytabech">
      <div v-show="isshow=='echart'" class="table" ref="echartsssss"></div>
      <div class="table" v-show="isshow=='table'">
        <TableColumn ref="tabledata"
        :tableData="tableData" 
        :tableConfig="tableConfig" >
        </TableColumn>
      </div>
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts';
import TableColumn from '@/components/Table/index.vue'
export default {
  name: 'CallPoliceTableandechart',
  components: { TableColumn },
  props: {
    barlist: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      isshow:'echart',
      tableData:[],
      tableConfig: [
        { label: '日期', prop: 'companyName',  },
        { label: '用能单元名称', prop: 'year', center: 'center' },
        { label: '尖电量(kWh)', prop: 'energyTypeName',},
        { label: '尖电费(元)', prop: 'energyUnit',},
        { label: '峰电量(kWh)', prop: 'energyTypeName',},
        { label: '峰电费(元)', prop: 'energyUnit', },
        { label: '平电量(kWh)', prop: 'energyTypeName',},
        { label: '平电费(元)', prop: 'energyUnit', },
        { label: '谷电量(kWh)', prop: 'energyTypeName',},
        { label: '谷电费(元)', prop: 'energyUnit',},
        { label: '总电量(kWh)', prop: 'energyTypeName',},
        { label: '总电费(元)', prop: 'energyUnit', },
        { label: '电镀电费(元)', prop: 'energyTypeName',},
        { label: '平均电价(元/kWh)', prop: 'energyUnit',},
      ]
    };
  },

  mounted() {
    this.getbarechart([])
  },

  methods: {
    addtable() {
      this.isshow = 'table'
    },
    addechart() {
        this.isshow = 'echart'
        this.getbarechart()
    },
    // 获取堆叠柱状图
    getbarechart(list) {
      var chartDom = this.$refs.echartsssss
      var myChart = echarts.init(chartDom);
      var option;
      const timePoints = list[0]?.datalist.map(ele => ele.timeReading)
      const series = list.map(ele => {
        return {
            name:ele.name,
            data: ele.datalist.map(ele=>ele.valueReading),
            type: 'bar',
            stack: 'total',
            emphasis: {
              focus: 'series'
            },
            animationDelay: function (idx) {
              return idx * 50 + 1000;
            }
          }
      })
      option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            // Use axis to trigger tooltip
            type: 'shadow' // 'shadow' as default; can also be 'line' or 'shadow'
          }
        },
        legend: {},
        grid: {
          left: '1%',
          right: '1%',
          bottom: '1%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          data: timePoints
        },
        yAxis: {
          name:'kWh',
          type: 'value',
        },
        series: series,
        animationEasing: 'elasticOut',
        animationDuration: 2000,
        barWidth: 60
      };
      myChart.clear();
      option && myChart.setOption(option);
      window.addEventListener("resize", () => {
        myChart.resize();
      });
    }
  },
  watch: {
  barlist: {
    deep: true,
    handler(newValue, oldValue) {
      if (newValue.length > 0) {
        this.getbarechart(newValue)
      } else {
        this.getbarechart([])
      }
    },
  }
}


};
</script>

<style scoped>
.bigboxss{
  height: 100%;
  padding: 20px;
  .title{
    text-align: right;
    i{
      margin-left: 10px;
      cursor: pointer;
      font-size: 20px;
    }
    i:hover{
      color: #2194ff;
    }
  }
  .bodytabech{
    height: 95%;
    .table{
      height: 100%;
    }
  }
}
</style>